<template>
	<view>
		<view :data-theme="theme()" :class="theme() || ''" class="mb10">
			<view class="topBox">
				<view class="title">{{title}}</view>
				<view class="d-f mun">
					<view class="munLeft">本周奖金池：<text class="colorRed">{{indexData.poolMoney}}</text> 元</view>
					<view class="munRight flex-1 tr" @click="onWaygo">往期奖金池<text
							class="icon iconfont icon-jiantou"></text></view>
				</view>
				<view class="content">
					<view class="pt20">总计猪师长：<text class="top">{{indexData.totalNum}}</text> 个，本期新晋升 <text
							class="top">{{indexData.num}}</text> 个猪师长</view>
					<view class="d-s-c p-10-0">每个猪师长预计分红：
						<view class="spanBox">{{indexData.fenhongMoney}}</view>元
					</view>
					<!-- <view class="d-s-c">或，离下次分红还差：<view class="spanBox" style="font-size: 16px;">{{countDown}}</view>
					</view> -->
				</view>
				<view class="title">{{title2}}</view>
			</view>
		</view>

		<view class="d-f commBox">
			<view class="ml20 grade3 f30 fb" @click="open">
				<picker @change="bindPickerChange" :value="timeindex" :range="array">
					{{timeindex== (period-1)?kingdata.startTime+'-'+kingdata.endTime:array[timeindex]}}
					<text class="icon iconfont icon-sanjiao1 ml10"></text>
					<!-- {{kingdata.startTime}} - {{kingdata.endTime}} -->
				</picker>
				<!-- {{time}}~{{time2}} -->
				<view class="spanBox" style="font-size: 16px;margin-top: 5rpx;">
					离分红还差: {{countDown}}
				</view>
			</view>
			<view class="flex-1 tr mr30 f30 fb colorRed">奖金池：{{kingdata.poolMoney}}元</view>
		</view>

		<view class="tableBox">
			<view class="table">
				<!-- 表头 -->
				<view class="table-header">
					<view :class="'table-cell tableCell__' + index" v-for="(header, index) in headers" :key="index"
						:style="index == 1 ? 'text-align: center':''" @click="isPopup = true">
						{{ header }}
					</view>
				</view>
				<!-- 表格内容 -->
				<view class="table-row" v-for="(row, rowIndex) in rows" :key="rowIndex">
					<view :class="'table-cell tableCell__' + cellIndex" v-for="(cell, cellIndex) in row"
						:key="cellIndex">
						{{ cell }}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="publish">
			<button @click="onWayBack">返回</button>
			<button class="butShare" open-type="share">
				<image src="http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/butShare02.png" mode="aspectFit">
				</image>
				分享
			</button>
		</view> -->

		<!-- 日历 -->
		<!-- <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="false" :lunar="true"
			:range="true" @confirm="confirm" /> -->
		<Popup :show="isPopup" type="middle" @hidePopup="isPopup = false">
			<view class="ww100 box-s-b">
				<view class="mt10 mb20 d-f">
					<view class="flex-1">业绩计算说明</view>
					<view class="icon iconfont icon-guanbi" @tap="isPopup = false"></view>
				</view>
				<view class="mb10">1、分享一个猪新兵，加5元；</view>
				<view class="mb10">2、分享一个猪小兵，加299元；</view>
				<view class="mb10">3、分享一个猪团长，加1980元；</view>
				<view class="mt10 mb20">备注</view>
				<view class="mb10">1、猪团长以上参加英雄榜排行；</view>
				<view class="mb10">2、每周分红后，业绩数据清零，重新开始计算！</view>
			</view>
		</Popup>
	</view>

</template>

<script>
	import config from '@/env/config.js';
	import Popup from '@/components/uni-popup.vue';
	export default {
		components: {
			Popup,
		},
		data() {
			return {
				indexData: '',
				title: '猪师长共同富裕奖',
				title2: '百万销冠英雄榜(周)',
				time: '2024-03-11',
				time2: '2024-03-17',
				timeindex: '',
				headers: ['名次', '名称', '本周业绩', '比例', '奖金(元)'],
				rows: [
					['冠军', '', '', '55%', ''],
					['亚军', '', '', '9%', ''],
					['季军', '', '', '8%', ''],
					['第四名', '', '', '7%', ''],
					['第五名', '', '', '6%', ''],
					['第六名', '', '', '5%', ''],
					['第七名', '', '', '4%', ''],
					['第八名', '', '', '3%', ''],
					['第九名', '', '', '2%', ''],
					['第十名', '', '', '1%', '']
				],
				array: [],
				kingdata: '',
				countDown: 0,
				isPopup: false,
				period: '',

			}
		},
		onLoad(option) {

		},
		onShow() {
			this.getData();
			this.getHeroRanking()
		},
		onReady() {
			if (config.appId == 10002) uni.setNavigationBarTitle({
				title: '下一个百万销冠就是您'
			});
		},
		created() {},
		methods: {
			bindPickerChange: function(e) {
				this.timeindex = e.detail.value
				this.getHeroRanking(this.timeindex + 1)
			},
			//打开日历
			open() {
				return
				this.$refs.calendar.open();
			},
			//日历确定
			confirm(e) {
				this.time = e.range.before;
				this.time2 = e.range.after;
			},
			onWaygo() {
				this.gotoPage('/pagesLive/menu/statistics/index')
			},
			onWayBack() {
				uni.navigateBack({})
			},
			getData() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				that._get('user/commonProsperity/index', {}, function(res) {
					uni.hideLoading()
					that.indexData = res.data;
					that.indexData.poolMoney = Math.trunc(that.indexData.poolMoney);

				})
			},
			oninvoke(data) {
				let that = this
				setInterval(function() {
					that.onWayCount(data.endTime);
				}, 1000);
			},
			onWayCount(endTime) {
				// alert(endTime)
				// 设置目标日期
				const targetDate = new Date(endTime.replace(/-/g, '/')).getTime();
				// 获取当前日期
				const now = new Date().getTime();
				// 计算时间差（毫秒）
				const timeDifference = targetDate - now;
				// 如果时间差小于0，则倒计时结束
				if (timeDifference <= 0) {
					console.log('倒计时结束');
					return;
				}
				// 将时间差转换为天、小时、分钟和秒
				const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
				const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
				// alert(days,hours,minutes,seconds)
				let time = `${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
				if (days == 0) time = `${hours}时 ${minutes}分 ${seconds}秒`;
				if (days == 0 && hours == 0) time = `${minutes}分 ${seconds}秒`;
				if (days == 0 && hours == 0 && minutes == 0) time = `${seconds}秒`;
				// alert(time)
				this.countDown = time;
			},
			getHeroRanking(name) {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				that._get('user/commonProsperity/heroRanking', {
					name: name || ''
				}, function(res) {
					that.kingdata = res.data;
					uni.hideLoading()
					that.kingdata.poolMoney = Math.trunc(that.kingdata.poolMoney);
					if (!that.period) {
						that.period = res.data.name
						that.timeindex = res.data.name - 1
						for (let i = 1; i <= that.period; i++) {
							const arr = i == that.period ? '本期' : '第' + i + '期'
							that.array.push(arr)
						}
					}
					console.log(that.period, that.array);
					that.onkingtime(res.data);
					that.getrows(res.data);
					that.oninvoke(res.data);
				})
			},
			onkingtime(data) {
				for (let i = 0; i < 2; i++) {
					let dateStr = i == 0 ? data.endTime : data.startTime; // 假设这是您要转换的日期字符串
					let date = new Date(dateStr.replace(/-/g, '/')); // 替换日期字符串中的连字符为斜杠
					let year = date.getFullYear();
					let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以需要+1
					let day = date.getDate().toString().padStart(2, '0');
					let dateOnly = `${year}-${month}-${day}`; // 拼接成YYYY-MM-DD格式
					if (i == 0) {
						this.kingdata.endTime = dateOnly
					} else {
						this.kingdata.startTime = dateOnly
					}
				}
			},
			getrows(data) {
				this.rows = [
					['冠军', '', '', '55%', ''],
					['亚军', '', '', '9%', ''],
					['季军', '', '', '8%', ''],
					['第四名', '', '', '7%', ''],
					['第五名', '', '', '6%', ''],
					['第六名', '', '', '5%', ''],
					['第七名', '', '', '4%', ''],
					['第八名', '', '', '3%', ''],
					['第九名', '', '', '2%', ''],
					['第十名', '', '', '1%', '']
				];
				data.userList.map((item, index) => {
					if (index < 10) {
						// this.rows[index][1] = item.userName.slice(0, 3) + "...";
						this.rows[index][1] = item.userName;
						this.rows[index][2] = parseInt(item.refMoney);
						this.rows[index][4] = item.money
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.title {
		width: 390rpx;
		height: 68rpx;
		background: #FFF7F1;
		line-height: 68rpx;
		border-radius: 10rpx;
		border: 1px solid #FA8728;
		font-weight: bold;
		font-size: 36rpx;
		color: red;
		text-align: center;
		margin: 0 auto;
	}

	.colorRed {
		color: red;
	}

	.topBox {
		background-image: url('http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/selesBg.png');
		background-size: cover;
		position: relative;
		padding: 10rpx 0;

		.mun {
			border-radius: 10rpx;
			border: 1px solid #FAF828;
			height: 82rpx;
			line-height: 82rpx;
			margin: 10rpx 20rpx 0rpx 20rpx;
			padding: 0rpx 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			.munLeft text {
				font-weight: bold;
				font-size: 36rpx;
				// color: #FAF828;
			}

			.munRight text {
				color: #FFFFFF;
				font-size: 26rpx;
				font-weight: bold;
				margin: 0 10rpx;
			}
		}

		.content {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			margin-left: 30rpx;

			.top {
				font-weight: bold;
				font-size: 30rpx;
				color: #FAF828;
			}

			.spanBox {
				background: #FFF7F1;
				border-radius: 10rpx;
				border: 1rpx solid #FA8728;
				padding: 0 10rpx;
				margin: 0 10rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: red;
			}
		}
	}

	.commBox {
		margin: 20rpx 0 20rpx 0;

		.icon-sanjiao1 {
			color: #999999;
			font-size: 26rpx;
		}

	}

	.tableBox {
		margin: 20rpx 20rpx 20rpx 20rpx;

		.table {
			width: 100%;
			border: 1rpx solid #E6E6E6;
			border-collapse: collapse;
		}

		.table-header {
			background-color: #E6E6E6;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.table-cell {
			border: 1rpx solid #f9f9f9;
			// flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			// width: 20%;
		}

		.tableCell__0 {
			// text-align: justify;
			width: 15%;
		}

		.tableCell__1 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-align: left;
			padding-left: 10rpx;
			width: 30%;
		}

		.tableCell__2 {
			width: 20%;
		}

		.tableCell__3 {
			width: 15%;
		}

		.tableCell__4 {
			width: 20%;
		}

		.table-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f4f4f4;
		}
	}

	.publish {
		display: flex;
		padding: 20rpx 0 40rpx 0;
		font-family: PingFang SC;

		button {
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #CCCCCC;
			width: 254rpx;
			height: 78rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 78rpx;
			margin: 0 30rpx;
		}

		.butShare {
			background: #14854D;
			display: flex;
			color: #FFFFFF;
			align-items: center;
			justify-content: center;
			flex: 1;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
</style>